<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>petroleum</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./CSS/all.css">
</head>

<body>
    <div class="container">

        <div class="header">
            <h1>各地汽油价格查询</h1><span>每次选择城市都要进行选择查询方式</span>
        </div>
        <div class="selectCity">
            <select class="select dowebok">
                <option>北京市</option>
                <option selected>天津市</option>
                <option>上海市</option>
                <option>重庆市</option>
                <option>湖北省</option>
                <option>河北省</option>
                <option>福建省</option>
                <option>广东省</option>
                <option>海南省</option>
                <option>台湾省</option>
                <option>四川省</option>
                <option>湖南省</option>
                <option>安徽省</option>
                <option>江苏省</option>
                <option>云南省</option>
                <option>新疆维吾尔自治区</option>
                <option>内蒙古自治区</option>
                <option>甘肃省</option>
                <option>广西壮族自治区</option>
                <option>宁夏回族自治区</option>
                <option>香港特别行政区</option>
                <option>澳门特别行政区</option>
                <option>浙江省</option>
                <option>辽宁省</option>
                <option>黑龙江省</option>
                <option>山东省</option>
                <option>江西省</option>
                <option>山西省</option>
                <option>陕西省</option>
                <option>吉林省</option>
                <option>贵州省</option>
                <option>青海省</option>
                <option>西藏自治区</option>
            </select>
        </div>
        <div class="search">
            <select class="selectMethod">
                <option checked>选择你的请求方式</option>
                <option value="axios">axios</option>
                <option value="jq">ajax</option>
                <option value="js">原生ajax</option>
            </select>
        </div>
        <div id="main" style="margin: 0 auto;width: 500px;height:400px;">
        </div>
    </div>


</body>
<style>
    @import "https://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.min.css";

    .select {
        position: relative;
        display: block;
        margin: 0 auto;
        max-width: 325px;
        color: #000000;
        text-align: left;
        border-radius: 20px;
        width: 300px;
        height: 20px;
    }

    .select .placeholder {
        position: relative;
        display: block;
        background-color: #393d41;
        z-index: 1;
        padding: 1em;
        border-radius: 2px;
        cursor: pointer;
    }

    .select .placeholder:hover {
        background: #34383c;
    }

    .select .placeholder:after {
        position: absolute;
        right: 1em;
        top: 50%;
        transform: translateY(-50%);
        font-family: 'FontAwesome';
        content: '\f078';
        z-index: 10;
    }

    .select.is-open .placeholder:after {
        content: '\f077';
    }

    .select.is-open ul {
        display: block;
    }

    .select.select--white .placeholder {
        background: rgb(19, 19, 19);
        color: rgb(0, 0, 0);
    }

    .select.select--white .placeholder:hover {
        background: #fafafa;
    }

    .select ul {
        display: none;
        position: absolute;
        overflow: hidden;
        width: 100%;
        background: #fff;
        border-radius: 2px;
        top: 100%;
        left: 0;
        list-style: none;
        margin: 5px 0 0 0;
        padding: 0;
        z-index: 100;
    }

    .select ul li {
        display: block;
        text-align: left;
        padding: 0.8em 1em 0.8em 1em;
        color: #999;
        cursor: pointer;
    }

    .select ul li:hover {
        background: #4ebbf0;
        color: #fff;
    }
</style>

<script type="module">
    import * as method from './JS/everyMethod.js'
    $(document).ready(function () {
        let cityValue;
        $('.select').change(function(event){
            cityValue=this.value
        })
        $('.selectMethod').change(function (event) {
             cityValue = $('.select')[0].value
            if (cityValue != null) {
                let url = `http://gasoline.market.alicloudapi.com/ai_market/ai_gasoline_price/get_gasoline_price/v2?DATE=20221109`
                let value = event.target.value

                if (value == 'jq') {
                    method.xmlFindJq('GET', url, jqXhrGetData)
                } else if (value == 'axios') {
                    method.axiosFind('GET', url, axiosGetData)
                } else if (value == 'js') {
                    method.xmlFindJs('GET', url, jsXhrGetData)
                }
            }
        })

        function axiosGetData(response) {
            console.log('axios',response)
            exaggerateEcharts(response.data.国内成品油汽油柴油价格实体信息)


        }
        function jqXhrGetData(response) {
            exaggerateEcharts(response.国内成品油汽油柴油价格实体信息)

        }
        function jsXhrGetData(response) {
            exaggerateEcharts(JSON.parse(response).国内成品油汽油柴油价格实体信息,'js')

        }


        function exaggerateEcharts(response,type=null) {
            let preData=selectCity(response,cityValue)
            var myChart = echarts.init(document.getElementById('main'));
            try{
            var one = Number(preData['89号汽油'])
            var three = Number(preData['92号汽油'])
            var four = Number(preData['95号汽油'])
            var five = Number(preData['98号汽油'])
            var six = Number(preData['0号柴油'])
            }catch(err){
                console.log(err)
            }
            var date = preData['日期']
            var year = date.substring(0, 4)
            var month = date.substr(4, 2)
            var day = date.substr(7, 2)
            var all = year + '年' + month + '月' + day + '日'
            var option = {
                title: {
                    text: `${preData['省份或城市名称']}石油价格${all}`
                },
                tooltip: {},
                legend: {
                    data: ['价格']
                },
                xAxis: {
                    data: ["98号汽油", "0号柴油", "95号汽油", "89号汽油", "92号汽油"]
                },
                yAxis: {},
                series: [{
                    name: '价格',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622'];
                                return colorList[params.dataIndex]
                            }
                        }
                    },
                    data: [five, six, four, one, three]
                }]
            }
            myChart.setOption(option);
        }
        function selectCity(data, city) {
            let currentCityData = data.filter(item => {
                return item['省份或城市名称'].includes(city)
            })
            return currentCityData[0]
        }
    })


</script>

</html>